<template>
    <div class="login-wrap">
        <div class="nav-head">
            <a>
                <div style="margin-top: 12px;margin-left: 30px;float: left; color:#fff">
                    企业综合管理系统
                    <!-- <img src="../assets/img/81.jpg" style="height: 25px;"> -->
                </div>
            </a>
        </div>
        <div class="ms-login flex">
            <div class="ms-login-left">
                <img src="../assets/img/login-bg.jpg" />
            </div>
            <div class>
                <div class="ms-title">企业综合管理系统</div>
                <el-form
                    :model="param"
                    :rules="rules"
                    ref="login"
                    label-width="0px"
                    class="ms-content"
                >
                    <el-form-item prop="loginAccount">
                        <el-input type="phone" v-model="param.loginAccount">
                            <el-button slot="prepend" icon="el-icon-mobile-phone"></el-button>
                        </el-input>
                    </el-form-item>
                    <!-- 密码 -->
                    <el-form-item prop="loginPassWord">
                        <el-input
                            type="password"
                            placeholder="请输入密码"
                            v-model="param.loginPassWord"
                            @keyup.enter.native="submitForm()"
                        >
                            <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                        </el-input>
                    </el-form-item>
                    <div class="login-btn">
                        <el-button type="primary" size="medium " @click="submitForm()">登录</el-button>
                    </div>
                    <p class="login-tips">Tips : 登录异常请联系公司管理员。</p>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import appMain from '../utils/app_main';
export default {
    data: function() {
        return {
            param: {
                loginAccount: '',
                targetSystem: '3',
                loginPassWord: ''
            },
            rules: {
                loginPassWord: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                loginAccount: [{ required: true, message: '请输入账号', trigger: 'blur' }]
            }
        };
    },
    created() {
        let token = this.$store.state.token_mark;
        console.log('token login', token);
        if (token != '') {
            this.$router.push(this.$store.state.lastRouter);
        }
    },
    methods: {
        submitForm() {
            this.$refs.login.validate(valid => {
                if (valid) {
                    //localStorage.setItem('ms_username', this.param.username);
                    //this.$store.state.token_mark = '12346';
                    //this.$router.push('/');
                    this.login();
                } else {
                    this.$message.error('请输入账号和密码');
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        login() {
            appMain
                .login(this.param)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.$store.commit('changeUser', res.data.data);
                        this.$message.success(res.data.message);
                        this.loadApply();
                    } else {
                        this.$message.error('用户名或密码错误');
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        //获取权限
        loadApply() {
            appMain
                .loadApply()
                .then(res => {
                    if (res.data.code === 20000) {
                        this.$store.commit('changeLoadApply', res.data.data);
                        console.log('changeLoadApply', res.data.data);
                        this.$nextTick(function() {
                            this.$router.push('/');
                        });
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        }
    }
};
</script>

<style scoped>
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../assets/img/80.jpg);
    background-size: cover;
}
.nav-head {
    width: 100%;
    background-color: rgba(10, 10, 10, 0.15);
    height: 50px;
    position: absolute;

    top: 0px;
}
.ms-title {
    width: 100%;
    line-height: 20px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    margin-top: 40px;
    /* border-bottom: 1px solid #ddd; */
}
.ms-login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 640px;
    padding: 0 30px;
    margin: -190px 0 0 -350px;
    border-radius: 10px 90px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
    box-shadow: 0 0 50px #27265c;
    border: 3px solid #fff;
}
.ms-login-left {
    padding: 40px 0;
    margin: 0 30px;
}
.ms-login-left img {
    width: 250px;
    height: 230px;
}
.ms-login-right {
    flex: 1;
}
.ms-content {
    padding: 30px 30px;
}
.login-btn {
    text-align: center;
}
.login-btn button {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
    background-color: #1c548e;
}
login-btn button:hover {
    background: #4b8baf;
}
.login-tips {
    font-size: 12px;
    line-height: 30px;
    color: #fff;
}
</style>